<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性-天气案例-深度监视简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic{
            border: 4px solid red;
            background-color: rgba(107, 212, 26, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .happy{
            border: 4px solid rgb(22, 218, 91);
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid rgb(34, 14, 135);
            background-color: rgba(58, 57, 62, 0.003);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .normal{
            border: 4px solid rgb(229, 228, 236);
            background-color: rgba(58, 57, 62, 0.003);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .hello1{
            border: 4px solid rgb(229, 228, 236);
            background-color: rgba(133, 131, 141, 0.003);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .hello2{
            border: 4px solid rgb(229, 228, 236);
            background-color: rgba(34, 21, 83, 0.003);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .hello3{
            border: 4px solid rgb(229, 228, 236);
            background-color: rgba(3, 1, 11, 0.003);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
    </style>
</head>

<body>
    <!-- 绑定样式
        1.class样式
            写法：class="xxx" ,xxx可以是字符串、对象、数组
                 字符串写法适用于： 类名不确定，要动态获取
                 对象写法适用于：   要绑定多个样式，个数不确定，名字也不确定
                 数组写法适用于：   要绑定多个样式，个数确定，名字也确定，但不确定用不用
        2.style样式
            :style="{fontSize:xxx}",其中xxx是动态值
            :style="[a,b]",其中a,b是样式对象

     -->

    <div id="root">
        <!-- 绑定的class样--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

        <br><br>

        <!-- 绑定的class样--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>

        <br><br>

         <!-- 绑定的class样--对象写法，适用于：要绑定的样式个数确定，名字不确定，但要动态决定用不用 -->
         <div class="basic" :class="classObj">{{name}}</div>

         <br><br>

        <!-- 绑定style样式--对象写法 -->
         <div class="basic" :style="styleObj">{{name}}</div>

         <br><br>

         <!-- 绑定style样式--数组写法 -->
         <div class="basic" :style="styleArr">{{name}}</div>
    </div>

</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
           name:'中国',
           mood:'normal',
           classArr:['hello1','hello2','hello3'],
           classObj:{
            hello1:false,
            hello2:false
           },
           styleObj:{
            fontSize: '40px',
            color: 'green'
           },
           styleObj2:{
           backgroundColor:'orange'
           },
           styleArr:[
           {
            fontSize: '10px',
            color: 'green'
           },
           {
           backgroundColor:'orange'
           }
           ]
        },
        methods:{
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        }
    })
</script>

</html>